<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp测试跨域</title>
</head>
<body>
    <select id="sheng">
    </select>
    <div id="school"></div>
</body>
<script>
    //注意方法要放到调用的上方
    //被后端的js调用
    function localFn(data){
        alert("可以跨域的jsonp.js文件,msg="+data.msg);
    }

    function sheng(data){
        console.log("远程省数据:"+data.msg);
    }
    
    //动态发请求
    function jsonp(url,method){
        let scr=document.createElement("script");
        scr.src=url+method;
        document.querySelector("head").appendChild(scr);
    }
    //调用
    let url="http://localhost:8080/email/kzq?callback=";
    jsonp(url,"sheng");

    //第四版获取灵活数据
    function myfun4(data){
        console.log("灵活数据:"+data.msg);
    }
    jsonp(url,"myfun4");
</script>
<!-- 第一版直接引用 -->
<!-- <script src="http://localhost:8080/email/js/jsonp.js"></script> -->

<!--第二版 用servlet代替 js-->
<!-- <script src="http://localhost:8080/email/kzq?callback=sheng"></script> -->

<!-- 第三版  js动态创建script -->

<!-- 第五版Jquery中发jsonp请求 -->
<script src="../js/jquery.min.js"></script>
<script>
    function jsonpofjq(data){
        alert("jq触发回调函数拿到数据:"+data.msg);
    }
let url1="http://localhost:8080/email/kzq";
$.ajax({
    url:url1,
    async:false,    //false为异步,true为同步
    dataType:"jsonp",
    jsonp:"callback",//默认为callback,可不写
    jsonpCallback:"jsonpofjq",//自定义回调函数
    success:function(data){
        console.log("JQ="+data.msg);
    }
})

// 作业： JSONP  查每个省的大学信息  (查省,查对应大学)
var shengs=document.querySelector("#sheng");
$.ajax({
    url:"http://localhost:8080/email/sheng",
    async:false,
    dataType:"jsonp",
    success:function(data){
        for(var i=0;i<data.msg.length;i++){
        // console.log("省="+data.msg[i].province);
        var opt=new Option(data.msg[i].province,data.msg[i].province);
        shengs.appendChild(opt);
        }
    }
})
shengs.onchange=function(){
    $.ajax({
    url:"http://localhost:8080/email/university?msg="+this.value,
    async:false,
    dataType:"jsonp",
    success:function(data){
        $("#school").html("");
        for(var i=0;i<data.msg.length;i++){
        // console.log("省="+data.msg[i].schoolName);
        $("#school").html($("#school").text()+"&nbsp;&nbsp;&nbsp;"+data.msg[i].schoolName)
        }
    }
})
}
</script>
</html>